<template>
  <div id="big-data-container" class="big-data-container" style="text-align: right;">
    <div class="head">
      <span style="font-size: 36px;color:floralwhite;font-weight: bold;margin-right:28%;">数字化部集中监控平台</span>
      <el-select v-model="current_month" clearable placeholder="月份" @change="month_change">
        <el-option v-for="item in month_select" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="data-container" style="color: floralwhite;">
      <div class="data-head" style="height: 45%; ">
        <div class="data-head-item" style="width: 30%;height:100%;">
          <div class="data-head-item-gdzz"
            style="height: 13%; text-align: center;padding-top: 10px; font-size: 24px; font-weight:550; background-color: #10096a;">
            本年度IT任务</div>
          <div class="data-head-item-gdzz2" style="height: 87%;">
            <div style="float: left; width: 33.33%; height: 100%;">
              <div id="chart-vhead-1-a" style=" width: 100%; height: 60%;"></div>
              <div style=" width: 100%; height: 40%; text-align: center; font-size: 20px;">
                <div>{{ inprogress }}</div>
                <div style="text-align: left;margin-top: 4%; margin-left: 27%; color: #f55301;">进行中</div>
                <div style="text-align: left;margin-top: 4%; margin-left: 27%;">工单：{{ total }}</div>
                <div style="text-align: left;margin-top: 4%; margin-left: 27%;">其他：{{ notinprogress }}</div>
              </div>
            </div>

            <div style="float: left;width: 33.33%;height: 100%;">

              <div id="chart-vhead-1-b" style=" width: 100%; height: 60%;"></div>
              <div style=" width: 100%; height: 40%; text-align: center; font-size: 20px;">
                <div>{{ completed }}</div>
                <div style="text-align: left;margin-top: 4%; margin-left: 27%; color: #5263ff;">已完成</div>
                <div style="text-align: left;margin-top: 4%; margin-left: 27%;">工单：{{ total }}</div>
                <div style="text-align: left;margin-top: 4%; margin-left: 27%;">其他：{{ notcompleted }}</div>
              </div>

            </div>
            <div style="float: left;width: 33.33%;height: 100%;">

              <div id="chart-vhead-1-c" style=" width: 100%; height: 60%;"></div>
              <div style=" width: 100%; height: 40%; text-align: center; font-size: 20px;">
                <div>{{ notstarted }}</div>
                <div style="text-align: left;margin-top: 4%; margin-left: 27%; color: #5fb878;">未开始</div>
                <div style="text-align: left;margin-top: 4%; margin-left: 27%;">工单：{{ total }}</div>
                <div style="text-align: left;margin-top: 4%; margin-left: 27%;">其他：{{ started }}</div>
              </div>

            </div>
          </div>
        </div>
        <div class="data-head-item" style="width: 30%;height: 100%;">
          <div class="data-head-item-gdzz"
            style="height: 13%; text-align: center;padding-top: 10px; font-size: 24px; font-weight:550; background-color: #10096a;">
            数字化部服务满意度调查</div>
          <div class="data-head-item-gdzz2" style="height: 87%; width:100%;">
            <div id="chart-vhead-2" style="width:100%;height:100%;">

            </div>
          </div>
        </div>
        <div class="data-head-item" style="width: 40%;height: 100%;">
          <div class="data-head-item-gdzz"
            style="height: 13%; text-align: center;padding-top: 10px; font-size: 24px; font-weight:550; background-color: #10096a;">
            已完成IT任务</div>
          <div class="data-head-item-gdzz2" style="height: 87%; ">
            <el-table :data="tableData2" height="100%" border style="width: 100%">
              <el-table-column prop="progress" label="进度" width="120">
                <template v-slot="scope">
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.progress"
                    :color="customColorGreen"></el-progress>
                </template>
              </el-table-column>
              <el-table-column prop="tc_departname" label="提出部门" width="120">
              </el-table-column>
              <el-table-column prop="zeren" label="责任人" width="120">
              </el-table-column>
              <el-table-column prop="q_decribe" label="问题描述">
                <template v-slot="scope">
                  <p v-html='scope.row.q_decribe'></p>
                </template>
              </el-table-column>
              <el-table-column prop="a_decribe" label="进度说明">
                <template v-slot="scope">
                  <p v-html='scope.row.a_decribe'></p>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="data-head" style="margin-top: 15px;height: 55%; ">
        <div class="data-head-item" style="width: 64%;height: 100%;">
          <div class="data-head-item-gdzz"
            style="height: 10%; text-align: center; font-size: 24px; font-weight:550; background-color: #10096a;">
            未完成IT任务追踪</div>
          <div class="data-head-item-gdzz2" style="height: 87%; ">
            <el-table ref="table" :data="tableData" height="100%" border style="width: 100%">
              <el-table-column prop="progress" label="进度" width="100%">
                <template v-slot="scope">
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.progress"
                    :color="customColor"></el-progress>
                </template>
              </el-table-column>
              <el-table-column prop="rec_datetime" label="受理时间" width="110%">
              </el-table-column>
              <el-table-column prop="tc_departname" label="提出部门" width="105%">
              </el-table-column>
              <el-table-column prop="tc_ren" label="提出人" width="110%">
              </el-table-column>
              <el-table-column prop="zeren" label="责任人" width="110%">
              </el-table-column>
              <el-table-column prop="q_decribe" label="问题描述">
                <template v-slot="scope">
                  <p v-html='scope.row.q_decribe'></p>
                </template>
              </el-table-column>
              <el-table-column prop="a_decribe" label="进度说明">
                <template v-slot="scope">
                  <p v-html='scope.row.a_decribe'></p>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="data-head-item" style="width: 36%;height:100%;">
          <div class="data-head-item-gdzz"
            style="height: 10%; text-align: center; font-size: 24px; font-weight:550; background-color: #10096a;">
            任务量及完成率
          </div>
          <div class="data-center-item-gdzz2" style="height: 87%; width:100%;">
            <div id="chart-center" style="width:100%;height:100%;">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
let $charthead2,
  $charthead1a,
  $charthead1b,
  $charthead1c,
  $chartcenter
import { toHandlers } from "vue";
import {
  charthead1a,
  charthead1b,
  charthead2,
  charthead1c,
  chartcenter
} from "./chart-options";
import "./layout.less";
import http from "@/api/http.js";
export default {
  components: {
    // "iview-circle": IviewCircle
  },
  data() {
    var now = new Date();

    return {
      head2Total: 0,
      notstarted: 0,
      inprogress: 0,
      completed: 0,
      total: 0,
      notinprogress: 0,
      notcompleted: 0,
      started: 0,
      tableData: [],
      tableData2: [],
      chartHeadArry: [],
      percentages: 100,
      customColor: '#f56c6c',
      customColorGreen: '#67c23a',
      customColors: [
        { color: '#d9d9d9', progress: 0 },
        { color: '#f56c6c', progress: 20 },
        { color: '#e6a23c', progress: 40 },
        { color: '#6f7ad3', progress: 60 },
        { color: '#1989fa', progress: 80 },
        { color: '#5cb87a', progress: 100 }
      ],
      current_month: now.getMonth() + 1 + "月",
      month_select: [
        { value: '本月', label: '本月' },
        { value: '1', label: '1月' },
        { value: '2', label: '2月' },
        { value: '3', label: '3月' },
        { value: '4', label: '4月' },
        { value: '5', label: '5月' },
        { value: '6', label: '6月' },
        { value: '7', label: '7月' },
        { value: '8', label: '8月' },
        { value: '9', label: '9月' },
        { value: '10', label: '10月' },
        { value: '11', label: '11月' },
        { value: '12', label: '12月' },
        { value: '全年', label: '全年' },
      ],
    };
  },
  created() {
    console.log("chart");
  },
  methods: {
    //IT任务
    get_IT_work(month) {
      let url_1a = "/api/digitaldata/getCcTackInfo?month=" + month;
      http.post(url_1a, {}, true).then((s) => {
        if (s.length === 0) {
        }
        var jsonArr1 = [];
        var jsonArr2 = [];
        var jsonArr3 = [];
        this.notstarted = 0;
        this.inprogress = 0;
        this.completed = 0;
        s.forEach((e) => {
          if (e.progressDemo == "未开始") {
            this.notstarted = e.num;
            console.log("未开始", e.num);
          } else if (e.progressDemo == "进行中") {
            this.inprogress = e.num;
          } else if (e.progressDemo == "已完成") {
            this.completed = e.num;
          }
        })
        this.total = this.notstarted + this.inprogress + this.completed;
        this.notinprogress = this.notstarted + this.completed;
        this.notcompleted = this.notstarted + this.inprogress;
        this.started = this.inprogress + this.completed;
        jsonArr1.push({
          value: this.inprogress,
          name: "进行中"
        });
        jsonArr1.push({
          value: this.notinprogress,
          name: "其他"
        })
        jsonArr2.push({
          value: this.completed,
          name: "已完成"
        });
        jsonArr2.push({
          value: this.notcompleted,
          name: "其他"
        })
        jsonArr3.push({
          value: this.notstarted,
          name: "未开始"
        });
        jsonArr3.push({
          value: this.started,
          name: "其他"
        })
        $charthead1a = echarts.init(document.getElementById("chart-vhead-1-a"));
        $charthead1b = echarts.init(document.getElementById("chart-vhead-1-b"));
        $charthead1c = echarts.init(document.getElementById("chart-vhead-1-c"));
        if (s.length === 0) {
          charthead1a.series[1].data[0].value = 0;
          charthead1b.series[1].data[0].value = 0;
          charthead1c.series[1].data[0].value = 0;
        } else {
          let exp = /\.{0,1}0+$/g;
          let inprogressPercent = this.inprogress * 100 / this.total;
          inprogressPercent = inprogressPercent.toFixed(2);
          inprogressPercent = inprogressPercent.replace(exp, "");
          let completedPercent = this.completed * 100 / this.total;
          completedPercent = completedPercent.toFixed(2);
          completedPercent = completedPercent.replace(exp, "");
          let notstartedPercent = this.notstarted * 100 / this.total;
          notstartedPercent = notstartedPercent.toFixed(2);
          notstartedPercent = notstartedPercent.replace(exp, "");
          charthead1a.series[1].data[0].value = inprogressPercent;
          charthead1b.series[1].data[0].value = completedPercent;
          charthead1c.series[1].data[0].value = notstartedPercent;
        }
        charthead1a.series[0].data = jsonArr1;
        $charthead1a.setOption(charthead1a, true);
        charthead1b.series[0].data = jsonArr2;
        $charthead1b.setOption(charthead1b, true);
        charthead1c.series[0].data = jsonArr3;
        $charthead1c.setOption(charthead1c, true);
      });
    },

    //数字化部服务满意度调查
    get_IT_surveyInfo(month) {
      $charthead2 = echarts.init(document.getElementById("chart-vhead-2"));
      let url = "/api/digitaldata/getItSurveyInfo?month=" + month;
      http.post(url, {}, true).then((s) => {
        var jsonArr = [];
        var total = 0;
        let charthead2 = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            itemGap: 15,
            itemWidth: 30,
            itemHeight: 20,
            orient: 'vertical',
            right: 10,
            top: 20,
            textStyle: {
              color: '#ffffff',
              fontSize: 16,
            },
            formatter: function (name) {
              let data = jsonArr;
              let total = 0;
              let tarValue = 0;
              for (let i = 0; i < data.length; i++) {
                total += parseInt(data[i].value);
                if (data[i].name == name) {
                  tarValue = data[i].value;
                }
              }
              let arr = [name + '  ', +' ' + parseInt(tarValue) + '个', '  ' + ((tarValue / total) * 100).toFixed(2) + '%']
              return arr.join('')
            }
          },
          toolbox: {
            show: false,
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          series: [{
            name: '评价',
            type: 'pie',
            radius: ['55%', '90%'],
            center: ['30%', '50%'],
            /* selectedOffset:0,
            selectedMode:false, */
            data: [
              //{ value: 38, name: '5 星' },
              // { value: 26, name: '1 星' } 
            ],
            label: {
              show: false,
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
          },
          //内圈百分比
          {
            type: "pie",
            center: ["30%", "50%"],
            radius: ["00%", "55%"], //内圆的半径，第一个为内半径，第二个为外半径
            avoidLabelOverlap: false,
            color: ["#000042"],
            data: [{
              hoverOffset: 1,
              value: "0",
              position: "center",
              name: "",
              itemStyle: {
                color: "#000042",
              },
              label: {
                normal: {
                  formatter: "评价总数\n\n{c}",
                  textStyle: {
                    fontWeight: "normal",
                    fontSize: 22,
                  },
                  show: true,
                  position: "center",
                  color: "#fff",
                },
              },
              labelLine: {
                normal: {
                  smooth: true,
                  lineStyle: {
                    width: 0,
                  },
                },
              },
              hoverAnimation: false,
            },],
          },
          ]
        };
        debugger
        if (!s.list1) {
          charthead2.series[0].data = [];
          charthead2.series[1].data[0].value = 0;
        } else {
          for (var i = 0; i < s.list1.length; i++) {
            var value = s.list1[i];
            var name = s.list2[i];
            total = Number(total) + Number(value);
            jsonArr.push({
              value: value,
              name: name
            });
          }
          this.chartHeadArry = jsonArr;
          charthead2.series[0].data = jsonArr;
          charthead2.series[1].data[0].value = total;
        }
        $charthead2.setOption(charthead2, true);
      });
    },

    //获取任务量及工作完成率
    get_quota_completionRate(month) {
      let urlcenter = "api/digitaldata/get_quota_completionRate?month=" + month;
      chartcenter.xAxis[0].data = [];
      chartcenter.series[0].data = [];
      chartcenter.series[1].data = [];
      http.post(urlcenter, {}, true).then((s) => {
        //完成率
        var mapRateData = new Array();
        //责任人
        var mapZerenData = new Array();
        //任务量
        var mapQuotaData = new Array();
        s.forEach((e) => {
          mapRateData.push(e.rate);
          mapZerenData.push(e.zeren);
          mapQuotaData.push(e.num);
        });
        if (s.length === 0) {
          this.$message.error("所选时间暂无任务")
          chartcenter.xAxis[0].data = [];
          chartcenter.series[0].data = [];
          chartcenter.series[1].data = [];
        } else {
          let max = mapQuotaData.reduce((max, current) => {
            return current > max ? current : max;
          }, -Infinity);
          while (max % 5 != 0) {
            max++;
          }
          chartcenter.xAxis[0].data.push(...mapZerenData);
          chartcenter.yAxis[0].max = max;
          chartcenter.yAxis[0].interval = max / 5;
          chartcenter.series[0].data.push(...mapQuotaData);
          chartcenter.series[1].data.push(...mapRateData);
        }
        $chartcenter = echarts.init(document.getElementById("chart-center"));
        $chartcenter.setOption(chartcenter, true);
      });
    },

    //已完成IT任务和未完成IT任务追踪
    get_task(month) {
      let urltask = "/api/digitaldata/getCctaskList?month="+month;
      http.post(urltask, {}, true).then((s) => {
        this.tableData = s;
      });
      let urltask2 = "/api/digitaldata/getCctaskOfFinishList?month="+month;
      http.post(urltask2, {}, true).then((s) => {
        this.tableData2 = s;
      });
    },
    month_change() {
      this.get_IT_surveyInfo(this.current_month);
      this.get_quota_completionRate(this.current_month);
      this.get_IT_work(this.current_month);
      this.get_task(this.current_month);
    }
  },
  mounted() {
    if ($charthead2) {
      $charthead2.dispose();
      $charthead1a.dispose();
      $charthead1b.dispose();
      $charthead1c.dispose();
    }

    let current_time = this.current_month.substring(0, this.current_month.length - 1);
    this.get_IT_work(current_time);
    this.get_IT_surveyInfo(current_time);
    this.get_quota_completionRate(current_time);
    this.get_task(current_time);
  },
  destroyed() {
    $charthead1a = null;
    $charthead1b = null;
    $charthead1c = null;
    $charthead2 = null;
    $chartcenter = null;
  },
};

</script>

<style>
.data-head>div {
  float: left;
}

.data-head-item {
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.2rem 0.4rem 0.15rem;
  background: rgba(255, 255, 255, 0.04);
  background-size: 100% auto;
  position: relative;
  margin-bottom: 0.15rem;
  z-index: 10;
}

.data-head-item-gdzz {
  text-align: center;
  color: white;
  font-size: 28px;
  position: relative;
  margin-bottom: 0.15rem;
}

.data-center-item {
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.2rem 0.4rem 0.15rem;
  background: rgba(255, 255, 255, 0.04);
  background-size: 100% auto;
  position: relative;
  margin-bottom: 0.15rem;
  z-index: 10;
}

.data-center-item {
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.2rem 0.4rem 0.15rem;
  background: rgba(255, 255, 255, 0.04);
  background-size: 100% auto;
  position: relative;
  margin-bottom: 0.15rem;
  z-index: 10;

}

.table-container {
  width: 100%;
  height: auto;
  background-color: #190e52;
}

.el-table__cell {
  background-color: #190e52;
  color: #fff;
  font-size: 15px;
}

.cell {
  background-color: #190e52;
  color: #fff;
  font-size: 15px;
}

/* #017590 */
.el-table th.el-table__cell {
  background-color: #190e52;
}

.el-table {
  --el-table-row-hover-bg-color: #190e52;
  --el-table-tr-bg-color: #190e52;
  --el-table-border-color: #017590;
  /* --el-table-border:3px #017590 solid; */
}

.el-table .el-table__cell {
  border: 2.8px #017590 solid;
}

.el-progress-bar__innerText {
  font-size: 15px;
}
</style>